<template>
  <!-- 需求: 根据点击拾色器的前三个颜色, 修改 app容器的类名  a b c -->
  <div id="app" :class="class_name">
    <!-- 一级路由的出口 -->
    <router-view />
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'App',
  data() {
    return {
      class_name: 'a'
    }
  },
  computed: {
    ...mapState('settings', ['theme'])
  },
  watch: {
    // 根据点击拾色器的前三个颜色, 修改 app容器的类名  a b c
    theme(val) {
      if (val === '#409EFF') {
        this.class_name = 'a'
      } else if (val === '#1890FF') {
        this.class_name = 'b'
      } else if (val === '#304156') {
        this.class_name = 'c'
      }
    }
  }
}
</script>
